import {
  UserOutlined,
  FieldBinaryOutlined,
  LockOutlined,
} from '@ant-design/icons';
import {
  message,
  Tabs,
  Space,
  Progress,
  Table,
  Tag,
  Button,
  Select,
  Modal,
  Input,
  Form,
} from 'antd';
import { useState, useEffect, memo } from 'react';
import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'dva';
import {
  useIntl,
  Link,
  history,
  FormattedMessage,
  SelectLang,
  useModel,
} from 'umi';
import qs from 'qs';
import styles from './index.less';

const itemStyle = {
  margin: ' 0 0.5rem 0.6rem',
};

const formLayout = {
  labelCol: { xs: 4, sn: 4 },
  wrapperCol: { xs: 24, sm: 20 },
};
const { Option } = Select;
const CollectionCreateForm = memo(
  ({ props, visible, onCreate, onCancel, record }) => {
    //子组件   展开弹窗
    const [form] = Form.useForm();
    form.setFieldsValue(record);
    const { categoryList } = props.vehicle;
    const onOK = () => {
      form
        .validateFields()
        .then((values) => {
          //请求
          props.dispatch({
            type: 'vehicle/reqAddVehicle',
            payload: values,
          });
          console.log(props);
        })
        .catch((info) => {});
    };
    return (
      <Modal
        title="添加车辆"
        onCancel={onCancel}
        onOk={onCreate}
        visible={visible}
        onOk={onOK}
      >
        <Form
          {...formLayout}
          // initialValues={records} 默认值，动态值用setFieldsValue
          form={form}
        >
          <Form.Item
            name="categoryId"
            label="汽车类型"
            rules={[{ required: true, message: '请选择汽车类型' }]}
          >
            <Select>
              {categoryList.map((item) => (
                <Select.Option key={item.categoryId} value={item.categoryId}>
                  {item.categoryName}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            name="licensePlateNumber"
            label="车牌号"
            rules={[{ required: true, message: '请输入车牌号' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="mileage"
            label="总里程数"
            rules={[{ required: true, message: '请输入总里程数' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    );
  },
);

class VehicleMessage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      needDatas: [],
      vehicleId: null,
      visible: false,
    };
    this.changeTypes = this.changeTypesL.bind(this);
    this.changeTypes = this.changeTypesR.bind(this);
    this.upLoadLoState = this.upLoadLoState.bind(this);
    this.upLoadRuState = this.upLoadRuState.bind(this);
  }
  upLoadLoState(record, value) {
    // this.setState({vehicleId:params})
    console.log(this.props);
    this.props.dispatch({
      type: 'vehicle/reqUpdateLockState',
      payload: {
        lockedState: value,
        vehicleId: record.vehicleId,
      },
    });
  }
  upLoadRuState(record, value) {
    console.log(value);
    // this.setState({vehicleId:params})
    this.props.dispatch({
      type: 'vehicle/reqUpdateRunningState',
      payload: {
        runningState: value,
        vehicleId: record.vehicleId,
      },
    });
  }
  changeTypesL(type) {
    switch (type) {
      case 0:
        return '未锁机';
      case 1:
        return '锁机';
    }
  }
  changeTypesR(type) {
    switch (type) {
      case 0:
        return '未运行';
      case 1:
        return '熄火';
      case 2:
        return '运行中';
    }
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'vehicle/getVmessage',
      payload: null,
    });
    dispatch({
      type: 'vehicle/reqGetCategoryList',
    });
    // setTimeout(()=>{
    //   const props = this.props
    //   console.log(props)
    //   props.vehicle.mewVeDatas.map((item,index)=>{
    //     console.log(item)
    //     const temValue = {
    //       categoryId: item.categoryId,
    //       createTime: item.createTime,
    //       licensePlateNumber: item.licensePlateNumber,
    //       lockedState: this.changeTypesL(item.lockedState),
    //       mileage: item.mileage,
    //       runningState: this.changeTypesR(item.runningState),
    //       userId: item.userId,
    //       vehicleId: item.vehicleId,
    //     }
    //     this.setState({needDatas:[...this.state.needDatas,temValue]})
    //     })
    // },100)
  }
  onCreate = () => {
    this.hiddenModal();
  };
  hiddenModal = () => {
    this.setState({
      visible: false,
    });
  };

  add = () => [
    this.setState({
      visible: true,
    }),
  ];
  render() {
    const columns = [
      {
        title: '车辆ID',
        dataIndex: 'vehicleId',
        key: 'vehicleId',
        render: (text) => <a>{text}</a>,
      },
      {
        title: '用户ID',
        dataIndex: 'userId',
        key: 'userId',
      },
      {
        title: '车牌号',
        dataIndex: 'licensePlateNumber',
        key: 'licensePlateNumber',
      },
      {
        title: '分类编号',
        dataIndex: 'categoryId',
        key: 'categoryId',
      },
      {
        title: '里程数',
        dataIndex: 'mileage',
        key: 'mileage',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        render: (text) => <span>{text.slice(0, 10)}</span>,
      },
      {
        title: '运行状态',
        dataIndex: 'runningState',
        key: 'runningState',
        render: (text) => <a>{this.changeTypesR(text)}</a>,
      },
      {
        title: '锁机状态',
        dataIndex: 'lockedState',
        key: 'lockedState',
        render: (text) => <a>{this.changeTypesL(text)}</a>,
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <Space size="middle">
            <Select
              defaultValue={record.lockedState}
              onChange={this.upLoadLoState.bind(this, record)}
            >
              <Option value={1}>锁机</Option>
              <Option value={0}>未锁机</Option>
            </Select>
            <Select
              defaultValue={record.runningState}
              onChange={this.upLoadRuState.bind(this, record)}
            >
              <Option value={0}>未运行</Option>
              <Option value={1}>熄火</Option>
              <Option value={2}>运行中</Option>
            </Select>
            {record.runningState === 2 && (
              <Link to={'/vehicle/' + record.vehicleId}>查看实时数据</Link>
            )}
          </Space>
        ),
      },
    ];
    return (
      <PageContainer>
        <Button
          type="primary"
          style={{ marginBottom: '10px' }}
          onClick={this.add}
        >
          添加车辆
        </Button>
        <Table dataSource={this.props.vehicle.newVeDatas} columns={columns} />
        <CollectionCreateForm
          props={this.props}
          visible={this.state.visible}
          onCreate={this.onCreate}
          onCancel={this.hiddenModal}
        />
      </PageContainer>
    );
  }
}

export default connect(({ login, vehicle }) => ({ login, vehicle }))(
  VehicleMessage,
);
